<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-popover placement="top" width="200" v-model="visible" title="添加分组">
          <el-input size="mini" placeholder="输入分组名称" v-model="group_name"></el-input>
          <div class="popbtn">
            <el-button size="mini" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="visible = addgroup()">确定</el-button>
          </div>
          <el-button slot="reference">添加分组</el-button>
        </el-popover>

        <!-- <div><el-button>添加分组</el-button></div> -->
        <div class="group_div">
          <ul class="group">
            <li :class="a_id == i ? 'active' : ''" v-for="(item, i) in grouplist" :key="i">
              <div>
                <p class="title" @click="change_group(item, i)">{{ item.name }}</p>
                <p @click="change_group(item, i)">{{ item.count }}</p>

                <p class="btns" v-if="item.name != '全部' && item.name != '未分组'">
                  <el-popover placement="top" width="200" v-model="item.show" title="编辑分组">
                    <el-input size="mini" placeholder="输入分组名称" v-model="item.name"></el-input>
                    <div class="popbtn">
                      <el-button size="mini" @click="item.show = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="editgroup(item)">确定</el-button>
                    </div>
                    <el-button type="text" slot="reference">编辑</el-button>
                  </el-popover>
                  <el-popover placement="top" width="200" v-model="item.show1" title="删除分组">
                    <span>是否删除分组</span>
                    <div class="popbtn">
                      <el-button size="mini" @click="item.show1 = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="delgroup(item.id)">确定</el-button>
                    </div>
                    <el-button type="text" slot="reference">删除</el-button>
                  </el-popover>
                </p>
              </div>
              <!-- <span>{{ item.name }}({{item.count}})</span> -->
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="19" class="list_con">
        <div>
          <el-upload
            name="image"
            :data="uploaddata"
            :multiple="true"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :on-error="handleImageError"
            :headers="headers"
            :action="url + geturl + '/pic/addPic'"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <div class="imglist">
          <div class="item_box" @click="selectItem(item)" v-for="(item, i) in imglist" :key="i">
            <div class="img_box">
              <vimage :src="item.pic_path"></vimage>
              <div class="img_size">{{ item.width }}*{{ item.height }}</div>
              <i class="icon-abl-close el-icon-error" @click="delPic(item.id)"></i>
            </div>
            <div class="name">
              <span>{{ item.pic_name }}</span>
            </div>
            <div v-if="item.checked" class="img_select"></div>
          </div>
        </div>
        <el-pagination @current-change="changepage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total" :page-size="10"></el-pagination>
      </el-col>
    </el-row>
    <div class="dialog-footer">
      <el-button @click="outData('close')">取消</el-button>
      <el-button type="primary" @click="outData">确定</el-button>
    </div>
  </div>
</template>

<script>
import {geturl, getpicList, groupList, addGroup, editGroup, delPic, delGroup} from '@/api/common';

import {getToken, getShopToken, getLoginType, logintype_byurl} from '@/utils/auth';
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      page: 1,
      size: 10,
      visible: false,
      // url: process.env.VUE_APP_BASE_API + '/',
      url: process.env.VUE_APP_BASE_API,
      grouplist: [],
      imglist: [],
      total: 0,
      visible_edit: false,
      group_name: '',
      a_id: 0,
      loading: false,
      geturl: '',

      uploaddata: {},
      headers: {}
    };
  },
  props: {
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    limit: {
      type: Number,
      default: 0
    },
    rk: {
      type: Number,
      default: 0
    }
  },
  watch: {
    rk() {
      this.init();
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    ...mapGetters(['ruleList'])
  },
  methods: {
    init() {
      this.geturl = geturl();
      let type = getLoginType(1);
      let id = this.$route.meta.id;
      let l = this.ruleList.filter(_ => {
        return _.level == id;
      });
      let url = '/' + this.geturl + '/pic/addPic';
      var PageAction;
      if (l.length > 0) {
        l.forEach(_ => {
          let i = _.ruleExtend.findIndex(a => {
            return 'POST' == a.method && url == a.rule_route;
          });
          if (i > -1) {
            PageAction = _.level + ',' + _.resource;
          }
        });
      }
       let mytype = logintype_byurl();
      if (type) {
        if (type == 'mall'&&mytype=='mall') {
          this.headers['Authorization'] = getShopToken();
          this.headers['PageAction'] = PageAction;
        } else if (type == 'shop') {
          this.headers['Authorization'] = getToken();
          this.headers['PageAction'] = PageAction;
        } else if (type == 'saas') {
          this.headers['Authorization'] = getToken();
          this.headers['PageAction'] = PageAction;
        } else {
          this.headers['Authorization'] = getToken();
          this.headers['PageAction'] = PageAction;
        }
      }
     
      if (mytype == 'mall' || mytype == 'shop') {
        this.headers['Affiliation'] = mytype;
      }
      this.groupList();
    },
    groupList() {
      let data = {};
      groupList(data).then(res => {
        let list = res.msg;
        list.forEach(a => {
          a.show = false;
          a.show1 = false;
        });
        this.grouplist = list;
        this.getimglist();
      });
    },
    buildlist() {
      this.imglist.forEach(a => {
        if (this.data.findIndex(_ => _.id == a.id) > -1) {
          a.checked = true;
        } else {
          a.checked = false;
        }
      });
    },
    getimglist() {
      let data = {
        page: this.page,
        size: this.size
      };
      if (this.a_id > 1) {
        data.pic_group_id = this.grouplist[this.a_id].id;
      }
      if (this.a_id == 1) {
        data.type = 1;
      }
      this.loading = true;
      getpicList(data, this.page, this.size).then(res => {
        let list = res.msg.data;
        list.forEach(a => {
          a.pic_path = a.pic_path.replace('\\', '/');

          //筛选哪些数据是传入的已选择数据
          if (this.data.findIndex(_ => _.pic_path == a.pic_path) > -1) {
            console.log(a);
            a.checked = true;
          } else {
            a.checked = false;
          }
        });
        this.total = res.msg.total;
        this.imglist = list;
        this.loading = false;
      });
    },
    change_group(item, i) {
      this.a_id = i;
      if (i > 1) {
        this.uploaddata = {
          pic_group_id: this.grouplist[this.a_id].id
        };
      }
      this.handleImageSuccess();
    },
    changepage(e) {
      this.page = e;
      this.getimglist();
    },
    handleImageSuccess() {
      this.page = 1;

      this.groupList();
    },
    handleImageError(e) {
      console.log(e);
      let message = JSON.parse(e.message);
      this.$message.error(message.error_msg);
    },
    delPic(id) {
      delPic({id: id}).then(res => {
        this.groupList();
      });
    },
    delgroup(id) {
      delGroup({id: id}).then(res => {
        this.groupList();
      });
    },
    selectItem(item) {
      if (!item.checked) {
        if (this.limit == 1) {
          item.checked = true;
          this.data.splice(0, 1);
          this.data.push(item);
          this.buildlist();
        } else {
          if (this.data.length < this.limit) {
            item.checked = true;
            this.data.push(item);
          } else {
            this.$message.error('图片选择上限');
          }
        }
      } else {
        item.checked = false;
        this.data.splice(this.data.findIndex(_ => _.id == item.id), 1);
      }
    },
    addgroup() {
      let data = {
        name: this.group_name
      };
      addGroup(data).then(res => {
        this.$message.success('添加分组成功');
        this.group_name = '';
        this.groupList();
      });
    },
    editgroup(item) {
      let data = {
        name: item.name,
        id: item.id
      };
      editGroup(data).then(res => {
        this.$message.success('编辑分组成功');
        this.groupList();
      });
    },
    //确定选择数据
    outData(type) {
      if (type == 'close') {
        this.$emit('closepup');
      } else {
        this.$emit('changeImg', this.data);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.group_div {
  height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
}
.group {
  li {
    padding: 0 12px;
    &.active {
      color: #2d8cf0;
    }
    div {
      height: 40px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:hover {
        color: #2d8cf0;
        p:nth-child(2) {
          display: none;
        }
        p:last-child {
          display: block;
        }
      }
      .title {
        width: 100px;
      }
      p {
        margin: 0;
      }
      .btns {
        display: none;
      }
    }
  }
}
.imglist {
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  height: 410px;
  margin-top: 10px;
  .item_box {
    cursor: pointer;
    padding: 0 10px 20px 0;
    position: relative;
    .img_select {
      position: absolute;
      width: 139px;
      height: 139px;
      top: 0;
      // bottom: 0;
      left: 0;
      // right: 0;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex;
      border-radius: 2px;
    }
    .img_box {
      width: 138px;
      height: 138px;
      border: 1px solid #e9edef;
      position: relative;

      img {
        width: 136px;
        height: 136px;
      }
      .img_size {
        bottom: 0;
        display: none;
        position: absolute;
        width: 100%;
        color: #fff;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.7);
        padding: 4px 0;
      }
      .icon-abl-close {
        font-size: 32px;
        position: absolute;
        top: -8px;
        right: -8px;
        display: none;
      }

      &:hover {
        .img_size {
          display: flex;
        }
        .icon-abl-close {
          display: block;
        }
      }
    }
    .name {
      font-size: 12px;
      line-height: 16px;
      color: #262b30;
      margin-top: 10px;
      width: 138px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.popbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 0 20px;
}
</style>
